<template>
    <div id="comboList">
        <div>
            <!--查询表单-->
            <el-form :inline="true" :model="searchFormData" class="demo-form-inline">
                <el-form-item label="通道名称">
                    <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通道名称">
                    <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通道名称">
                    <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>   <el-form-item label="通道名称">
                <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                    <el-option v-for="item in channels" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item label="通道名称">
                    <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通道名称">
                    <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>   <el-form-item label="通道名称">
                <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                    <el-option v-for="item in channels" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>   <el-form-item label="通道名称">
                <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                    <el-option v-for="item in channels" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>   <el-form-item label="通道名称">
                <el-select v-model="searchFormData.channel" placeholder="通道名称1">
                    <el-option v-for="item in channels" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>





                <el-form-item label="套餐名称">
                    <el-select v-model="searchFormData.combo" placeholder="套餐名称">
                        <el-option v-for="item in combos" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="searchFormData.createTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit" icon="el-icon-search">查询</el-button>
                    <el-button type="success" @click="addClick" icon="el-icon-plus">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <el-table :data="tableData" border height="500px" max-height="500px">
            <el-table-column prop="comboName" label="套餐名称" align="center"/>
            <el-table-column prop="comboNo" label="套餐编号" align="center"/>
            <el-table-column prop="comboType" label="套餐类型" align="center"/>
            <el-table-column prop="validTime" label="有效期" align="center"/>
            <el-table-column prop="comboSize" label="套餐规格" align="center"/>
            <el-table-column prop="costPrice" label="成本" align="center"/>
            <el-table-column prop="salePrice" label="售价" align="center"/>
            <el-table-column prop="channel" label="通道" align="center"/>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==0">可用</span>
                    <span v-if="scope.row.status==1">不可用</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"/>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button @click="editClick(scope.row)" type="primary" size="mini">编辑</el-button>
                    <el-button :type="scope.row.status==1?'success':'danger'" size="mini" @click="delClick(scope.row)">
                        {{(scope.row.status
                        ==
                        1) ?
                        '启用':'停用'}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--翻页-->
        <div>
            <pageHelper :current-page="currentPage" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" class="my_pagenation"></pageHelper>
        </div>
        <!--新增表单-->
        <el-dialog title="新增" :visible.sync="addDialogFormVisible" width="500px">
            <el-form :model="addForm" class="my_el_form">
                <el-form-item label="通道名称" :label-width="formLabelWidth">
                    <el-input v-model="addForm.channelName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="运营商" :label-width="formLabelWidth">
                    <el-input v-model="addForm.vendor" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="addForm.username" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="addForm.password" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="key" :label-width="formLabelWidth">
                    <el-input v-model="addForm.key" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="接口地址" :label-width="formLabelWidth">
                    <el-select v-model="addForm.url" placeholder="接口地址">
                        <el-option v-for="item in apiAddress" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCancel">取 消</el-button>
                <el-button type="primary" @click="addConfirm">确 定</el-button>
            </div>
        </el-dialog>
        <!--编辑表单-->
        <el-dialog title="编辑" :visible.sync="editDialogFormVisible" width="500px">
            <el-form :model="editForm" class="my_el_form" >
                <el-form-item label="通道名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.channelName" autocomplete="off" style="width: 80px"></el-input>
                </el-form-item>
                <el-form-item label="运营商" :label-width="formLabelWidth">
                    <el-input v-model="editForm.vendor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="editForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="editForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="key" :label-width="formLabelWidth">
                    <el-input v-model="editForm.key" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="接口地址" :label-width="formLabelWidth">
                    <el-select v-model="editForm.url" placeholder="接口地址">
                        <el-option label="接口1" value="url1"></el-option>
                        <el-option label="接口2" value="url2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editCancel">取 消</el-button>
                <el-button type="primary" @click="editConfirm">确 定</el-button>
            </div>
        </el-dialog>
        <loading v-if="loading"></loading>
    </div>
</template>

<script>
    import axios from 'axios';
    import pageHelper from '@/website/center/common/pageHelper';
    import {timeFormat} from '@/module/tools';
    import {getMonthStartDate} from '@/module/dateUtil';
    import {Loading} from 'element-ui';

    export default {
        name: 'comboList',
        components: {pageHelper, Loading},
        data() {
            return {
                columnWidth: 100,
                currentPage: 2,
                total: 120,
                type: "danger",
                loading: false,
                loadInstance: null,
                addDialogFormVisible: false,
                editDialogFormVisible: false,
                formLabelWidth: '80px',
                tableData: [{
                    comboName: '黑皮40G',
                    comboNo: '12132',
                    comboType: '月套餐',
                    validTime: '当月有效',
                    comboSize: '40G',
                    costPrice: 200,
                    salePrice: 300,
                    channel: "广东移动1",
                    status: 0, //初步设置1为停用，0为启用
                    createTime: '2018-09-09',
                    url: 'url2',
                    type: 'success',
                    currentPage: 2,
                    total: 120,
                }],
                searchFormData: {
                    createTime: [],
                    channel: '',
                    combo: '',
                },
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                combos: [
                    {label: "全部", value: null},
                    {label: "套餐1", value: 1},
                    {label: "套餐2", value: 2},
                    {label: "套餐3", value: 3}],
                apiAddress: [
                    {label: "地址1", value: "url1"},
                    {label: "地址2", value: "url2"},
                    {label: "地址3", value: "url3"}],
                addForm: {
                    channelName: '',
                    vendor: '',
                    username: '',
                    password: '',
                    key: '',
                    url: ''
                },
                editForm: {
                    channelName: '',
                    vendor: '',
                    username: '',
                    password: '',
                    key: '',
                    url: ''
                },
                options: ''

            };
        },
        methods: {
            delClick(row) {
                let status = row.status;
                if (status == 1) {
                    status = "启用";
                } else if (status == 0) {
                    status = "停用";
                }
                this.$confirm('此操作将' + status + '该套餐, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let loading = this.$loading(this.options);
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        setTimeout(() => {
                            loading.close();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }, 2000);
                    });
                }).catch(() => {
                    /*  this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });*/
                    console.log("取消")
                });
            },
            searchSubmit() {
                console.log('查询提交====');
                console.log(this.searchFormData);
                let beginTime = this.searchFormData.createTime[0];
                let endTime = this.searchFormData.createTime[1];
                let str = timeFormat(beginTime, "yyyy-MM-dd");
                console.log("打印日期", str);
                let b = getMonthStartDate();
                console.log(b);
            },
            addClick() {
                this.addDialogFormVisible = true;
            },
            //确认新增
            addConfirm() {
                console.log("获取新增表的数据");
                console.log(this.addForm);
            },
            addCancel() {
                this.addDialogFormVisible = false;
                //注意关闭数据后的数据清楚
            },
            editClick(row) {
                console.log('==编辑操作==');
                console.log(row);
                this.editForm.channelName = row.channel;
                this.editForm.vendor = row.channel;
                this.editForm.username = row.channel;
                this.editForm.password = row.channel;
                this.editForm.key = row.channel;
                this.editForm.url = row.url;
                this.editDialogFormVisible = true;
            },
            //确认修改
            editConfirm(row) {

            },
            editCancel() {
                this.clearEditForm();
                this.editDialogFormVisible = false;
                //注意关闭数据后的数据清楚
            },
            clearEditForm() {
                this.editForm = {
                    channelName: '',
                    vendor: '',
                    username: '',
                    password: '',
                    key: '',
                    url: ''
                }
            },
            handleSizeChange(val) {
                console.log(`123每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`345当前页: ${val}`);
            }
        },
        mounted() {
            this.options = {
                text: '加载中...',
                background: 'rgba(0,0,0,0,7)',
                target: document.getElementById("comboList")
            }
            let createTime = this.$data.searchFormData.createTime;
            createTime.push(getMonthStartDate());
            createTime.push(Date());
            console.log(this.$data);
            let obj = {
                comboName: '黑皮40G',
                comboNo: '12132',
                comboType: '月套餐',
                validTime: '当月有效当月有效',
                comboSize: '40G',
                costPrice: 200,
                salePrice: 300,
                channel: "广东移动3",
                createTime: '2018-09-09',
                url: 'url1',
                status: 1,
                type: "danger"
            };
            let i = 0;
            for (i = 0; i < 15; i++) {
                console.log("添加对象")
                this.$data.tableData.push(obj);
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .express-ctr-item {
        margin-top: 12px;
    }

    .express-ctr-item .express-ctr-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        line-height: 32px;
    }

    .my-input {
        width: 40%;
    }

    .my_el_form input {
        width: 200px;
    }

</style>

